<template>
	<view class="contentFoot" style="user-select: text;">
		<sunMenu></sunMenu>
		<view class="login-title">會員登入 / Member Login</view>
		<view class="login-form">
			<input type="text" class="input-field" placeholder="Email" v-model="formData.email" @blur="validateEmail" />
			<text v-if="emailError" class="error-text">{{ emailError }}</text>
			<input type="password" class="input-field" placeholder="使用者密碼" v-model="formData.password" />
			<text class="forgot-password" @click="goToForgotPassword">忘記密碼?</text>

			<button class="login-btn" @click="handleLogin">登入</button>

			<view class="register-section">
				<text>未註冊會員？</text>
				<text class="register-link" @click="goRe">註冊會員</text>
			</view>
		</view>
		<view class="footer">
			<text class="footer-text">© 2025 夏璽玥網路有限公司 版權所有 XIA AKOYA INC. All Rights Reserved. 統一編號90370186</text>
		</view>
		<view style="height: 50rpx;"></view>
	</view>
</template>

<script>
	import sunMenu from '../components/sun-menu/sun-menu.vue'
	export default {
		components: {
			sunMenu
		},
		data() {
			return {
				formData: {
					email: '',
					password: ''
				},
				emailError: ''
			}
		},
		onShow() {
			uni.setStorageSync("activeId",'')
		},
		methods: {
			validateEmail() {
				const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/

				if (!this.formData.email) {
					this.emailError = 'Email不能為空'
					return false
				}

				if (!emailRegex.test(this.formData.email)) {
					this.emailError = '請輸入有效的Email地址'
					return false
				}

				this.emailError = ''
				return true
			},

			handleLogin() {
				if (!this.validateEmail()) {
					return
				}
				this.$modal.loading("登录中，请耐心等待...")
				this.pwdLogin()
			},
			// 密码登录
			async pwdLogin() {
				this.formData.username = this.formData.email
				this.$store.dispatch('Login', this.formData).then(() => {
					this.$modal.closeLoading()
					this.loginSuccess()
				})
			},
			// 登录成功后，处理函数
			loginSuccess(result) {
				// 设置用户信息
				this.$store.dispatch('GetInfo').then(res => {
					this.$tab.reLaunch('/pages/myVip')
				})
			},
			goRe() {
				uni.navigateTo({
					url: '/pages/myRegister'
				})
			},
			goToForgotPassword() {
				uni.navigateTo({
					url: '/pages/forgotPassword'
				})
			}
		}
	}
</script>

<style>
	.login-form{
		padding: 0 100rpx;
	}
	.login-container {
		/* padding: 20px;
		max-width: 600px; */
		margin: 0 auto;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.login-title {
		text-align: center;
		font-size: 24px;
		margin-bottom: 30px;
		position: relative;
		margin-top: 60rpx;
		font-weight: bold;
	}

	.login-title::after {
		content: '';
		position: absolute;
		bottom: -10px;
		left: 50%;
		transform: translateX(-50%);
		width: 60px;
		height: 2px;
		background-color: #000;
	}

	.line-login-section {
		text-align: center;
		margin-bottom: 30px;
	}

	.line-login-text {
		color: #666;
		margin-bottom: 15px;
		display: block;
	}

	.line-btn {
		background-color: #00B900;
		color: white;
		padding: 10px 30px;
		border: none;
		border-radius: 5px;
		margin: 10px 0;
	}

	.line-notice {
		color: #666;
		font-size: 14px;
	}

	.input-field {
		width: 100%;
		margin: 10px 0;
		border: 1px solid #ddd;
		border-radius: 4px;
		height: 80rpx;
		padding: 0 24rpx;
	}

	.forgot-password {
		color: #0066cc;
		text-align: right;
		display: block;
		margin: 10px 0;
	}

	.login-btn {
		width: 100%;
		padding: 12px;
		background: linear-gradient(135deg, #0DC5B4 0%, #09A396 100%);
		color: white;
		border: none;
		border-radius: 40rpx;
		border: none;
		border-radius: 4px;
		margin: 20px 0;
	}

	/* 添加手機適配樣式 */
	@media screen and (max-width: 768px) {
		.login-btn {
			width: 80%;
			/* 縮小按鈕寬度 */
			margin: 20px auto;
			/* 居中顯示 */
			padding: 10px;
			/* 減小內邊距 */
			font-size: 16px;
			/* 增加字體大小 */
		}

		.line-btn {
			width: 80%;
			margin: 10px auto;
			padding: 8px 20px;
			font-size: 16px;
			/* 增加字體大小 */
		}
	}

	.register-section {
		text-align: center;
	}

	.register-link {
		color: #0066cc;
		margin-left: 5px;
	}

	/* 添加錯誤提示樣式 */
	.error-text {
		color: #ff4444;
		font-size: 12px;
		margin-top: 5px;
		padding-left: 5px;
	}

	/* 當有錯誤時的輸入框樣式 */
	.input-field.error {
		border-color: #ff4444;
	}
</style>